<template>
  <div class="resource-list">
    <!-- 上面布局是表单 -->
    <!-- 下面的布局是表格 -->
    <el-card class="box-card">
      <div>
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
            <el-form-item label="资源名称" prop="name">
              <el-input v-model="form.name" placeholder="名称" ></el-input>
            </el-form-item>
            <el-form-item label="资源路径" prop="url">
              <el-input v-model="form.url" placeholder="路径"></el-input>
            </el-form-item>
            <el-form-item label="资源分类" prop="categoryId">
              <!-- 会将value设置达到v-model中 -->
              <el-select v-model="form.categoryId" placeholder="请选择分类">
                <!-- <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option> -->
                <!-- 请求服务端数据 -->
                <el-option label="无上级菜单" :value="-1"> </el-option>
                <el-option
                  v-for="item in resourceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button @click="$router.push({ name: 'resource-create' })"
            >+新增资源</el-button
          >
        </div>
        <!-- 使用 Table 组件 -->
        <el-table :data="resources" style="width: 100%" v-loading="isLoading">
          <el-table-column type="index" label="编号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="资源名称"> </el-table-column>
          <el-table-column prop="url" label="资源路径"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
          <!-- 设置过滤器需要使用作用域插槽获取数据 -->
          <el-table-column label="添加时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createdTime | dateFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                @click="handleDelete(scope.row)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页结构 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.current"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getResourcePages,
  deleteResource,
  getResourceCategories,
} from "@/services/resource";
import { Message } from "element-ui";
export default {
  // 导出当前组件的配置对象
  name: "ResourceList",

  data() {
    return {
      form: {
        id: "",
        name: "",
        categoryId: "",
        url: "",
        description: "",
        current: 1,
        size: 5,
      },
      resources: [],

      // 筛选功能要用到
      totalCount: 0,

      isLoading: false,

      resourceList: [],
    };
  },

  methods: {
    onSubmit() {
      console.log("submit!");
      this.form.size = 1;
      this.loadResources();
    },

    reset() {
      // this.form.categoryId = '';
      // this.form.name = '';
      // this.form.url = '';
      // 必须，设置ref属性，绑定prop属性，点击才有用。
      this.$refs.form.resetFields();
    },

    async loadResources() {
      const { data } = await getResourcePages({
        current: this.form.current,
        size: this.form.size,
        name: this.form.name,
        url: this.form.url,
        categoryId: this.form.categoryId,
      });
      console.log("---resource-----------");
      console.log(data);
      if (data.code === "000000") {
        this.resources = data.data.records;
        this.totalCount = data.data.total;
      }
    },

    // 编辑资源
    handleEdit(rowData) {
      // 设置跳转
      this.$router.push({
        name: "resource-edit",
        params: {
          id: rowData.id,
        },
      });
    },

    // 删除资源
    async handleDelete(rowData) {
      const data = await deleteResource(rowData.id);
      if (data.data.code === "000000") {
        Message.success(data.data.mesg);
        this.loadResources();
      }
    },

    // 每页条数的显示发送变化的时候。
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // 頁數还原默认值0
      this.form.size = val;
      this.form.current = 1;
      this.loadResources();
    },
    // 当前页发送变化的时候触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.current = val;
      this.loadResources();
    },

    data() {
      return {
        current: 1,
      };
    },

    async loadResourceCategories() {
      const data = await getResourceCategories();
      console.log(data);
      if (data.data.code === "000000") {
        this.resourceList = data.data.data;
      }
    },
  },

  created() {
    this.loadResources();
    this.loadResourceCategories();
  },

  filters: {
    dateFormat(date) {
      console.log(date);
      date = new Date(date);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
        ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    },
  },
};
</script>

<style lang="scss" scoped></style>
